<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>simple</title>
        <link rel="stylesheet" href="./css/bootstrap.css" />
        <!-- 切换成完全体  -->
        <!-- <script src="./js/bootstrap.js"></script> -->
        <script src="./js/bootstrap.bundle.js"></script>
        <link rel="stylesheet" href="./css/bs-slide.css" ></link>
    </head>
    <body>
        
        <!-- modal 模态框 dialog-->
        <button class="btn btn-danger" 
        data-bs-toggle="modal" data-bs-target="#insertModal" >新增</button>
        <div class="modal" id="insertModal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        新增表单
                        <button data-bs-dismiss="modal">x</button>
                    </div>
                    <div class="modal-body">
                        <form>
                            xxxx
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button> 提交表单</button>
                    </div>
                </div>
            </div>
        </div>
        <br/>
        <!-- drawer offcanvas -->
        <button class="btn btn-info" 
        data-bs-toggle="offcanvas" data-bs-target="#modifyOffcanvas">
        修改</button>
        <div class="offcanvas offcanvas-top" id="modifyOffcanvas">
            <div class="offcanvas-header">
                <button data-bs-dismiss="offcanvas">x</button>
            </div>
            <div class="offcanvas-body">yy</div>
        </div>
        <script>



        </script>
    </body>
</html>